<template>
  <div>
    <!-- 区隔内容的分割线。 -->
    <el-divider></el-divider>
    <!-- 交酒信息 -->
    <el-form
      ref="baseForm"
      label-width="100px"
      :label-position="'top'"
      style="margin-top: 0"
      :model="state.formData"
      class="ht-search-form"
    >
      <div class="title">
        收酒信息
      </div>

      <el-row :gutter="24" style="flex: 1" type="flex">
        <el-col :span="4">
          <el-form-item label="收酒单号">
            <el-input
              :clearable="true"
              v-model="state.formData.reciveWineOrderNo"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label="转移方式">
            <el-input placeholder=""></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item
            label="收酒日期"
            :rules="{
              required: true,
              message: '请输入',
              trigger: 'blur',
            }"
          >
            <el-date-picker
              type="date"
              format="yyyy 年 MM 月 dd 日"
              value-format="yyyy-MM-dd"
              style="width:100%"
              placeholder="选择日期"
            >
            </el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>

      <div class="title">
        收酒酒品
      </div>
      <!-- 摘酒类型 -->
      <el-row :gutter="24" style="flex: 1" type="flex">
        <el-col :span="4">
          <el-form-item
            label="酒品名称"
            :rules="{
              required: true,
              message: '请输入',
              trigger: 'blur',
            }"
          >
            <ht-select-base-data
              :dataTypeId="'positions'"
              :clearable="true"
            ></ht-select-base-data>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label="酒品代码">
            <ht-select-base-data
              :dataTypeId="'positions'"
              :clearable="true"
              :disabled="true"
            ></ht-select-base-data>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item
            label="生产年月"
            :rules="{
              required: true,
              message: '请输入',
              trigger: 'blur',
            }"
          >
            <ht-select-base-data
              :dataTypeId="'positions'"
              :clearable="true"
            ></ht-select-base-data>
          </el-form-item>
        </el-col>
      </el-row>
      <!-- 降级信息 -->
      <div class="title" style="margin-bottom:20px;">
        降级信息
      </div>

      <el-row :gutter="24">
        <el-col :span="4">
          <el-form-item label="是否降级">
            <el-radio-group v-model="state.radio">
              <el-radio :label="3">是</el-radio>
              <el-radio :label="6">否</el-radio>
              <el-radio :label="9">待确认</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <div v-if="state.radio == 3">
          <el-col :span="4">
            <el-form-item
              label="降级后酒品"
              :rules="{
                required: true,
                message: '请输入',
                trigger: 'blur',
              }"
            >
              <ht-select-base-data
                :dataTypeId="'positions'"
                :clearable="true"
              ></ht-select-base-data> </el-form-item
          ></el-col>
          <el-col :span="4">
            <el-form-item label="酒品代码">
              <ht-select-base-data
                :dataTypeId="'positions'"
                :clearable="true"
                :disabled="true"
              ></ht-select-base-data> </el-form-item
          ></el-col>
          <el-col :span="4">
            <el-form-item
              label="生产年月"
              :rules="{
                required: true,
                message: '请输入',
                trigger: 'blur',
              }"
            >
              <ht-select-base-data
                :dataTypeId="'positions'"
                :clearable="true"
              ></ht-select-base-data> </el-form-item
          ></el-col>
          <el-col :span="4">
            <el-form-item
              label="酒度"
              style="position:relative;"
              :rules="{
                required: true,
                message: '请输入',
                trigger: 'blur',
              }"
            >
              <span class="position">%vol</span>
              <el-input placeholder="请输入"></el-input> </el-form-item
          ></el-col>
          <el-col :span="4">
            <el-form-item
              label="温度"
              style="position:relative;"
              :rules="{
                required: true,
                message: '请输入',
                trigger: 'blur',
              }"
            >
              <el-input placeholder="请输入"></el-input>
              <span class="position" style="left: 258px;">℃</span>
            </el-form-item></el-col
          >
        </div>
      </el-row>

      <el-row v-if="state.radio == 3" :gutter="24">
        <el-col :span="4">
          <el-form-item label="验度人">
            <ht-select-user
              v-model="state.formData.applyer"
              placeholder="请输入"
              :clearable="true"
            ></ht-select-user> </el-form-item
        ></el-col>
      </el-row>

      <div class="title" style="margin-top:20px;">
        过磅信息
      </div>
      <el-row :gutter="22" style="flex: 1" type="flex">
        <el-col :span="4">
          <el-form-item label="皮重">
            <el-input placeholder="请输入"></el-input>
            <span class="position" style="left: 273px;">T</span>
          </el-form-item>
        </el-col>

        <el-col :span="4">
          <el-form-item label="皮重记录人">
            <ht-select-user
              v-model="state.formData.applyer"
              placeholder="请输入"
              :clearable="true"
            ></ht-select-user>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label="皮重填写时间">
            <el-date-picker
              type="date"
              style="width:100%"
              placeholder="选择日期"
              format="yyyy 年 MM 月 dd 日 hh时 mm分"
              value-format="yyyy-MM-dd hh:mm"
            >
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label="毛重">
            <el-input placeholder="请输入"></el-input>
            <span class="position" style="left: 273px;">T</span>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label="毛重记录人">
            <ht-select-user
              v-model="state.formData.applyer"
              placeholder="请输入"
              :clearable="true"
            ></ht-select-user>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label="毛重填写时间">
            <el-input placeholder="请输入"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="22" style="flex: 1" type="flex">
        <el-col :span="4">
          <el-form-item label="净重">
            <el-input placeholder="请输入"></el-input>
            <span class="position" style="left: 273px;">T</span>
          </el-form-item>
        </el-col>

        <el-col :span="4">
          <el-form-item label="地磅记录人">
            <ht-select-user
              v-model="state.formData.applyer"
              placeholder="请输入"
              :clearable="true"
            ></ht-select-user>
          </el-form-item>
        </el-col>
      </el-row>

      <div class="title" style="margin: 24px 0">
        收酒明细
      </div>
      <div class="block">
        <el-timeline style="padding: 0;">
          <el-timeline-item timestamp="移出" color="#777E79" placement="top">
            <div class="el-card">
              <!-- 移出 -->
              <!-- 第一排 -->

              <el-row :gutter="22" style="flex: 1" type="flex">
                <el-col :span="4">
                  <el-form-item label="酒库">
                    <ht-select-base-data
                      :dataTypeId="'positions'"
                      :clearable="true"
                    ></ht-select-base-data>
                  </el-form-item>
                </el-col>
                <el-col :span="4">
                  <el-form-item
                    label=" 容器"
                    :rules="{
                      required: true,
                      message: '请输入',
                      trigger: 'blur',
                    }"
                  >
                    <ht-select-base-data
                      :dataTypeId="'positions'"
                      :clearable="true"
                    ></ht-select-base-data>
                  </el-form-item>
                </el-col>
                <el-col :span="4">
                  <el-form-item label="容器编号">
                    <ht-select-base-data
                      :dataTypeId="'positions'"
                      :disabled="true"
                      :clearable="true"
                    ></ht-select-base-data>
                  </el-form-item>
                </el-col>
                <el-col :span="4">
                  <el-form-item
                    label="酒度"
                    style="position:relative;"
                    :rules="{
                      required: true,
                      message: '请输入',
                      trigger: 'blur',
                    }"
                  >
                    <span class="position">%vol</span>
                    <el-input placeholder="请输入"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="4">
                  <el-form-item
                    label="温度"
                    style="position:relative;"
                    :rules="{
                      required: true,
                      message: '请输入',
                      trigger: 'blur',
                    }"
                  >
                    <el-input placeholder="请输入"></el-input>
                    <span class="position" style="left: 258px;">℃</span>
                  </el-form-item>
                </el-col>
                <el-col :span="4">
                  <el-form-item
                    label="液位期初值"
                    :rules="{
                      required: true,
                      message: '请输入',
                      trigger: 'blur',
                    }"
                  >
                    <el-input placeholder="请输入"></el-input>
                    <span class="position" style="left: 258px;">m</span>
                  </el-form-item>
                </el-col>
              </el-row>
              <!-- 第二排 -->
              <el-row :gutter="22" style="flex: 1" type="flex">
                <el-col :span="4">
                  <el-form-item
                    label="液位期末值"
                    :rules="{
                      required: true,
                      message: '请输入',
                      trigger: 'blur',
                    }"
                  >
                    <el-input placeholder="请输入"></el-input>
                    <span class="position" style="left: 258px;">m</span>
                  </el-form-item>
                </el-col>
                <el-col :span="4">
                  <el-form-item label="液位发生值">
                    <el-input placeholder="请输入"></el-input>
                    <span class="position" style="left: 258px;">m</span>
                  </el-form-item>
                </el-col>
                <el-col :span="4">
                  <el-form-item label="原度数量">
                    <el-input placeholder="请输入"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="4">
                  <el-form-item label="折60°数量">
                    <el-input placeholder="请输入"></el-input>
                  </el-form-item>
                </el-col>

                <el-col :span="4">
                  <el-form-item label="经手人">
                    <ht-select-user
                      v-model="state.formData.applyer"
                      placeholder="请输入"
                      :clearable="true"
                    ></ht-select-user>
                  </el-form-item>
                </el-col>
                <el-col :span="4">
                  <el-form-item label="审核人">
                    <ht-select-user
                      v-model="state.formData.applyer"
                      placeholder="请输入"
                      :clearable="true"
                    ></ht-select-user>
                  </el-form-item>
                </el-col>
              </el-row>
            </div>
          </el-timeline-item>
          <el-timeline-item timestamp="移入" color="#777E79" placement="top">
          </el-timeline-item>
        </el-timeline>
        <div class="el-card">
          <!-- 移出 -->
          <!-- 第一排 -->

          <el-row :gutter="22" style="flex: 1" type="flex">
            <el-col :span="4">
              <el-form-item label="酒库">
                <ht-select-base-data
                  :dataTypeId="'positions'"
                  :clearable="true"
                ></ht-select-base-data>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item
                label=" 容器"
                :rules="{
                  required: true,
                  message: '请输入',
                  trigger: 'blur',
                }"
              >
                <ht-select-base-data
                  :dataTypeId="'positions'"
                  :clearable="true"
                ></ht-select-base-data>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item label="容器编号">
                <ht-select-base-data
                  :dataTypeId="'positions'"
                  :disabled="true"
                  :clearable="true"
                ></ht-select-base-data>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item
                label="酒度"
                style="position:relative;"
                :rules="{
                  required: true,
                  message: '请输入',
                  trigger: 'blur',
                }"
              >
                <span class="position">%vol</span>
                <el-input placeholder="请输入"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item
                label="温度"
                style="position:relative;"
                :rules="{
                  required: true,
                  message: '请输入',
                  trigger: 'blur',
                }"
              >
                <el-input placeholder="请输入"></el-input>
                <span class="position" style="left: 258px;">℃</span>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item
                label="液位期初值"
                :rules="{
                  required: true,
                  message: '请输入',
                  trigger: 'blur',
                }"
              >
                <el-input placeholder="请输入"></el-input>
                <span class="position" style="left: 258px;">m</span>
              </el-form-item>
            </el-col>
          </el-row>
          <!-- 第二排 -->
          <el-row :gutter="22" style="flex: 1" type="flex">
            <el-col :span="4">
              <el-form-item
                label="液位期末值"
                :rules="{
                  required: true,
                  message: '请输入',
                  trigger: 'blur',
                }"
              >
                <el-input placeholder="请输入"></el-input>
                <span class="position" style="left: 258px;">m</span>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item label="液位发生值">
                <el-input placeholder="请输入"></el-input>
                <span class="position" style="left: 258px;">m</span>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item label="原度数量">
                <el-input placeholder="请输入"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item label="折60°数量">
                <el-input placeholder="请输入"></el-input>
              </el-form-item>
            </el-col>

            <el-col :span="4">
              <el-form-item label="经手人">
                <ht-select-user
                  v-model="state.formData.applyer"
                  placeholder="请输入"
                  :clearable="true"
                ></ht-select-user>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item label="审核人">
                <ht-select-user
                  v-model="state.formData.applyer"
                  placeholder="请输入"
                  :clearable="true"
                ></ht-select-user>
              </el-form-item>
            </el-col>
          </el-row>
        </div>
      </div>
      <!-- <el-divider></el-divider> -->
      <!-- 控制开关 -->
      <!-- 运酒车交酒 -->

      <!-- <div style="display:flex;">
        <el-switch v-model="state.switch"
                   style="margin-bottom:20px;"
                   active-color="#13ce66"
                   inactive-color="#CACECB">
        </el-switch>
        <span style="margin-left:2px; ">运酒车交酒</span>
      </div>

      <div v-if="state.switch">

        <div class="title"
             style="margin:20px 0px;">
          运输信息

        </div>
        <el-row :gutter="24"
                style="flex: 1"
                type="flex">
          <el-col :span="4">
            <el-form-item label="皮重">
              <ht-select-base-data :dataTypeId="'positions'"
                                   :clearable="true"></ht-select-base-data>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="司机">
              <ht-select-base-data :dataTypeId="'positions'"
                                   :clearable="true"></ht-select-base-data>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="押车员">
              <ht-select-base-data :dataTypeId="'positions'"
                                   :clearable="true"></ht-select-base-data>
            </el-form-item>
          </el-col>

        </el-row>
        <div class="title">
          过磅信息

        </div>
        <el-row :gutter="22"
                style="flex: 1"
                type="flex">

          <el-col :span="4">
            <el-form-item label="皮重">
              <el-input placeholder="请输入"></el-input>
              <span class="position"
                    style="left: 273px;">T</span>
            </el-form-item>
          </el-col>

          <el-col :span="4">
            <el-form-item label="皮重记录人">
              <el-input placeholder="请输入"></el-input>

            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="皮重填写时间">
              <el-input placeholder="请输入"></el-input>

            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="毛重">
              <el-input placeholder="请输入"></el-input>
              <span class="position"
                    style="left: 273px;">T</span>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="毛重记录人">
              <el-input placeholder="请输入"></el-input>

            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="毛重填写时间">
              <el-input placeholder="请输入"></el-input>

            </el-form-item>
          </el-col>

        </el-row>
        <el-row :gutter="22"
                style="flex: 1"
                type="flex">

          <el-col :span="4">
            <el-form-item label="净重">
              <el-input placeholder="请输入"></el-input>
              <span class="position"
                    style="left: 273px;">T</span>
            </el-form-item>
          </el-col>

          <el-col :span="4">
            <el-form-item label="地磅记录人">
              <el-input placeholder="请输入"></el-input>

            </el-form-item>
          </el-col>

        </el-row>
      </div> -->
    </el-form>
  </div>
</template>
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
interface State {
  /** 数据状态 */
  loading: boolean;
  radio: any;
  switch: boolean;
  formData: any;
}
@Component
export default class Index extends Vue {
  /** 数据 */
  state: State = {
    loading: false,
    radio: 6,
    switch: true,
    formData: {
      //收酒单号
      reciveWineOrderNo: '',
      //*收酒日期
      reciveWineDate: '',
      //酒品名称
      reciveWineBreed: '',
      //酒品代码
      reciveWineBreedCode: '',
      //皮重
      tare: '',
      //皮重记录人
      tareRecoder: '',
      //皮重填写时间
      tareRecodTime: '',
      //毛重
      grossWeight: '',
      //毛重记录人
      grossRecoder: '',
      // 毛重填写时间
      grossRecodTime: '',
      //净重
      weight: '',
      //地磅记录人
      weightbridgeRecoder: '',
    },
  };
  /** 生命周期 */
  /** 方法 */
  /** 监听 */
  /** 计算属性 */
}
</script>
<style lang="scss" scoped>
.position {
  position: absolute;
  left: 244px;
  top: 1px;
  z-index: 999;
}

:deep(.el-timeline-item__node--normal) {
  width: 8px;
  height: 8px;
  left: 1px;
}
:deep(.el-card) {
  background-color: #f7f9f8;
  height: 202px;
  padding: 0 24px;
}
:deep(.el-timeline-item__wrapper) {
  padding-left: 17px;
}
:deep(.el-timeline-item__timestamp) {
  color: #323433;
}

:deep(.el-timeline-item__timestamp.is-top) {
  margin-bottom: 8px !important;
  padding-top: 0px !important;
  color: #323433 !important;
}

:deep(.el-timeline-item) {
  padding-bottom: 16px !important;
}
</style>
